MosselfestijnPage.render   B
last analyzed

Complexity

Conditions 1

Size

Total Lines 56
Code Lines 45

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 45
dl 0
loc 56
c 0
b 0
f 0
rs 8.8
cc 1

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
import { graphql } from "gatsby";
2
import { GatsbyImage } from "gatsby-plugin-image";
3
import React, { Component } from "react";
4
5
import SEO from "../components/seo";
6
import Layout from "../layouts/index";
7
8
class MosselfestijnPage extends Component {
9
  render() {
10
    const { affiche } = this.props.data;
11
    return (
12
      <Layout>
13
        <SEO
14
          lang="nl-BE"
15
          title="Mosselfestijn reservaties"
16
          description="Mosselfestijn 2020 - Inschrijvingen"
17
          path={this.props.location.pathname}
18
        />
19
        <div className={`limited-width_wrapper`}>
20
          <header>
21
            <h1>Mosselfestijn</h1>
22
          </header>
23
          <main>
24
            <p>
25
              Op vrijdag 10, zaterdag 11 en zondag 12 september 2021 vindt ons
26
              jaarlijkse Mosselfestijn weer plaats. Om de spreiding te kunnen
27
              garanderen en wachttijden aan de ingang zoveel mogelijk te
28
              beperken werken we dit jaar met een reservatiesysteem. Hieronder
29
              kan je zelf jouw gewenste tijdstip en gezelschap selecteren en een
30
              tafel boeken (voor 08/09/2021).
31
            </p>
32
            <p>
33
              Telefonisch reserveren kan dagelijks tussen 18u en 21u op het
34
              nummer{` `}
35
              <a href="tel:+32475981611" className="rich-link">
36
                0475/98.16.11
37
              </a>
38
              .
39
            </p>
40
            <p>
41
              Ter plaatse een tafel vragen kan, naargelang de beschikbaarheid op
42
              dat moment, maar hou er rekening mee dat we onze capaciteit hebben
43
              moeten verlagen om aan de regelgeving te kunnen voldoen. Wie zeker
44
              wil zijn van zijn plek kan beter reserveren.
45
            </p>
46
            <tbkr-bm-widget
47
              restaurant-id="34742560"
48
              source="website"
49
              use-modal="0"
50
              lang="nl"
51
              theme="light"
52
            ></tbkr-bm-widget>
53
            <script src="https://reservations.tablebooker.com/tbkr-widget-import.min.js"></script>
54
          </main>
55
          <footer>
56
            <GatsbyImage
57
              image={{
58
                ...affiche.childImageSharp.gatsbyImageData,
59
              }}
60
              alt="Mosselfestijn 2021"
61
            />
62
          </footer>
63
        </div>
64
      </Layout>
65
    );
66
  }
67
}
68
69
export const pageQuery = graphql`
70
  query {
71
    affiche: file(name: { eq: "mossel2021-affiche" }) {
72
      ...KCVVFullWidth
73
    }
74
  }
75
`;
76
77
export default MosselfestijnPage;
78